<div class="breadCrumb clearfix">    
    <ul id="breadcrumbs">
        <li><a href="index-2.html">Home</a></li>
        <li><a href="#">Tables</a></li>
        <li>Dynamic tables</li>
    </ul>        
</div>

<div class="content">            
    
    <div class="row-fluid">
        
        <div class="widget">
            <div class="head">
                <div class="icon"><i class="icosg-clipboard1"></i></div>
                <h2>Default table sorting</h2>                       
            </div>                
                <div class="block-fluid">
                    <table class="table" cellpadding="0" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th><input type="checkbox" class="checkall"/></th>
                                <th width="25%">Name</th>
                                <th width="20%">Product</th>
                                <th width="20%">Status</th>
                                <th width="20%">Date</th>
                                <th width="15%" class="TAC">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="528"/></td>
                                <td><a href="#">Dmitry Ivaniuk</a></td>
                                <td>Product #212</td>
                                <td><span class="label label-important">New</span></td>
                                <td>24/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="527"/></td>
                                <td><a href="#">John Doe</a></td>
                                <td>Product #132</td>
                                <td><span class="label label-important">New</span></td>
                                <td>24/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="526"/></td>
                                <td><a href="#">Alex Fruz</a></td>
                                <td>Product #53</td>
                                <td><span class="label label-important">New</span></td>
                                <td>23/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="525"/></td>
                                <td><a href="#">Olga Yukhimchuk</a></td>
                                <td>Product #874</td>
                                <td><span class="label label-info">Pending</span></td>
                                <td>23/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="524"/></td>
                                <td><a href="#">Angelina Rose</a></td>
                                <td>Product #533</td>
                                <td><span class="label label-info">Pending</span></td>
                                <td>23/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>                            
                        </tbody>
                    </table>                    
                </div> 
        </div>            
        
        <div class="widget">
            <div class="head">
                <div class="icon"><span class="icosg-target1"></span></div>
                <h2>Table sorting</h2>                       
            </div>                
                <div class="block-fluid">
                    <table class="fTable" cellpadding="0" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th><input type="checkbox" class="checkall"/></th>
                                <th width="25%">Name</th>
                                <th width="20%">Product</th>
                                <th width="20%">Status</th>
                                <th width="20%">Date</th>
                                <th width="15%" class="TAC">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="528"/></td>
                                <td><a href="#">Dmitry Ivaniuk</a></td>
                                <td>Product #212</td>
                                <td><span class="label label-important">New</span></td>
                                <td>24/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="527"/></td>
                                <td><a href="#">John Doe</a></td>
                                <td>Product #132</td>
                                <td><span class="label label-important">New</span></td>
                                <td>24/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="526"/></td>
                                <td><a href="#">Alex Fruz</a></td>
                                <td>Product #53</td>
                                <td><span class="label label-important">New</span></td>
                                <td>23/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="525"/></td>
                                <td><a href="#">Olga Yukhimchuk</a></td>
                                <td>Product #874</td>
                                <td><span class="label label-info">Pending</span></td>
                                <td>23/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="524"/></td>
                                <td><a href="#">Angelina Rose</a></td>
                                <td>Product #533</td>
                                <td><span class="label label-info">Pending</span></td>
                                <td>23/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr> 
                            <tr>
                                <td><input type="checkbox" name="order[]" value="600"/></td>
                                <td><a href="#">Alexandra Belova</a></td>
                                <td>Product #898</td>
                                <td><span class="label label-success">Delivered</span></td>
                                <td>21/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="601"/></td>
                                <td><a href="#">Ivanov Ivan</a></td>
                                <td>Product #900</td>
                                <td><span class="label label-success">Delivered</span></td>
                                <td>21/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="602"/></td>
                                <td><a href="#">Eugune Noise</a></td>
                                <td>Product #231</td>
                                <td><span class="label label-success">Delivered</span></td>
                                <td>20/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="603"/></td>
                                <td><a href="#">Anatoly Yukhim</a></td>
                                <td>Product #874</td>
                                <td><span class="label label-success">Delivered</span></td>
                                <td>20/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="604"/></td>
                                <td><a href="#">Vasily Ivaniuk</a></td>
                                <td>Product #355</td>
                                <td><span class="label label-success">Delivered</span></td>
                                <td>19/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>                                 
                        </tbody>
                    </table>                    
                </div> 
        </div>              
        <div class="widget">
            <div class="head">
                <div class="icon"><span class="icosg-target1"></span></div>
                <h2>Table sorting pagination</h2>                       
            </div>                
                <div class="block-fluid">
                    <table class="fpTable" cellpadding="0" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th><input type="checkbox" class="checkall"/></th>
                                <th width="25%">Name</th>
                                <th width="20%">Product</th>
                                <th width="20%">Status</th>
                                <th width="20%">Date</th>
                                <th width="15%" class="TAC">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="528"/></td>
                                <td><a href="#">Dmitry Ivaniuk</a></td>
                                <td>Product #212</td>
                                <td><span class="label label-important">New</span></td>
                                <td>24/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="527"/></td>
                                <td><a href="#">John Doe</a></td>
                                <td>Product #132</td>
                                <td><span class="label label-important">New</span></td>
                                <td>24/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="526"/></td>
                                <td><a href="#">Alex Fruz</a></td>
                                <td>Product #53</td>
                                <td><span class="label label-important">New</span></td>
                                <td>23/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="525"/></td>
                                <td><a href="#">Olga Yukhimchuk</a></td>
                                <td>Product #874</td>
                                <td><span class="label label-info">Pending</span></td>
                                <td>23/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="524"/></td>
                                <td><a href="#">Angelina Rose</a></td>
                                <td>Product #533</td>
                                <td><span class="label label-info">Pending</span></td>
                                <td>23/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr> 
                            <tr>
                                <td><input type="checkbox" name="order[]" value="600"/></td>
                                <td><a href="#">Alexandra Belova</a></td>
                                <td>Product #898</td>
                                <td><span class="label label-success">Delivered</span></td>
                                <td>21/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="601"/></td>
                                <td><a href="#">Ivanov Ivan</a></td>
                                <td>Product #900</td>
                                <td><span class="label label-success">Delivered</span></td>
                                <td>21/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="602"/></td>
                                <td><a href="#">Eugune Noise</a></td>
                                <td>Product #231</td>
                                <td><span class="label label-success">Delivered</span></td>
                                <td>20/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="603"/></td>
                                <td><a href="#">Anatoly Yukhim</a></td>
                                <td>Product #874</td>
                                <td><span class="label label-success">Delivered</span></td>
                                <td>20/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="order[]" value="604"/></td>
                                <td><a href="#">Vasily Ivaniuk</a></td>
                                <td>Product #355</td>
                                <td><span class="label label-success">Delivered</span></td>
                                <td>19/11/2012</td>
                                <td class="TAC">
                                    <a href="#"><span class="icon-ok"></span></a> 
                                    <a href="#"><span class="icon-pencil"></span></a> 
                                    <a href="#"><span class="icon-trash"></span></a>
                                </td>
                            </tr>                                 
                        </tbody>
                    </table>                    
                </div> 
        </div>            

        <div class="widget">
            <div class="head dark">
                <div class="icon"><span class="icos-loading"></span></div>
                <h2>AJAX Data load</h2>                       
            </div>                
                <div class="block-fluid">
                    <table class="aTable" cellpadding="0" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th width="20%">Rendering engine</th>
                                <th width="25%">Browser</th>
                                <th width="25%">Platform(s)</th>
                                <th width="15%">Engine version</th>
                                <th width="15%">CSS grade</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>                    
                </div> 
        </div>             
        
        
    </div>
    
    
</div>   